<template>
	<view class="myPage bgF5" :style="{ '--color': color, '--total-height': totalHeight + 'px' }">
		<status-bar :title="tabTitle" back="0" :showSetting="vid ? 1 : 0" v-if="!pageSet.immerse || toTop"></status-bar>

		<!-- 普通电商 -->
		<view
			class="top_0 auto100"
			:class="{ pTop: pageSet.immerse, thmeBg: !pageSet.topBgImg }"
			v-if="pageSet.style == 0"
			:style="{ backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none' }"
		>
			<view class="d-flex a-center white m-bot40">
				<image
					:src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)"
					mode="aspectFill"
					@click="toUrlbtn('/userPage/user/userinfo')"
					class="avatar bor_radius m-right20"
				></image>
				<view class="flex-1" v-if="userinfo">
					<view class="size32 bold ellipsis m-bot10">{{ userinfo.nickName }}</view>
					<view class="bgwhite bor_radius_20 padding2-14 size22 thmeColor" v-if="userinfo.vipId" style="width: fit-content">{{ userinfo.vipName }}</view>
				</view>
				<view class="flex-1 size32 bold" v-else @click="showModal = true">登录/注册</view>
				<view class="text-center" @click="toSign" v-if="pageSet.showSignIn == 1">
					<text class="iconfont icon-qiandao size40 p-left20 p-right20"></text>
					<view class="m-top4">签到</view>
				</view>
				<view class="text-center" @click="toUrlbtn('/userPage/message/messageList')" v-if="startUp.service_state == 1 && pageSet.showMessage == 1">
					<text class="iconfont icon-conversation_icon size40 p-left20 p-right20" :class="{ unread: parseInt(userinfo.unreadMsg) }" :data-num="userinfo.unreadMsg"></text>
					<view class="m-top4">消息</view>
				</view>
			</view>
			<view class="d-flex white m-bot40">
				<view class="text-center flex-1" @click="toUrlbtn('/userPage/sign/integralRecord')">
					<view class="size36 bold">{{ userinfo.sign || 0 }}</view>
					<view class="m-top10">{{ nameDefinition.fenTitle || '积分' }}</view>
				</view>
				<view class="text-center flex-1" @click="toUrlbtn('/moneyPage/capital/myMoney')">
					<view class="size36 bold">{{ money }}</view>
					<view class="m-top10">{{ nameDefinition.balanceTitle || '余额' }}({{ unit }}{{ nameDefinition.balanceUnit || '元' }})</view>
				</view>
				<view class="text-center flex-1" @click="toUrlbtn('/userPage/user/discount_coupon')">
					<view class="size36 bold">{{ userinfo.couponCount || 0 }}</view>
					<view class="m-top10">优惠券</view>
				</view>
				<view class="text-center flex-1" @click="toUrlbtn('/moneyPage/capital/withdraws')" v-if="userinfo.income > 0">
					<view class="size36 bold">{{ parseFloat(userinfo.income) }}</view>
					<view class="m-top10">
						可提现
						<text class="iconfont icon-xiangyouxiayiye size22 white"></text>
					</view>
				</view>
			</view>
			<view class="collect bor_radius_top20 d-flex j-sa color_f2">
				<view @click="toUrlbtn('/userPage/user/followList')">关注 {{ userinfo.followCount || 0 }}</view>
				<view @click="toUrlbtn('/userPage/user/CollectList')">收藏 {{ userinfo.collectCount || 0 }}</view>
				<view @click="toUrlbtn('/userPage/user/viewed')">足迹 {{ footprint }}</view>
			</view>
			<!-- 会员 -->
			<view class="grade bg33 bor_radius_top20 color_FC0">
				<view class="wh p-left20 d-flex f-column j-centert p-re" v-if="userinfo">
					<view class="m-bot10">{{ userinfo.vipName }}</view>
					<view class="size40">{{ userinfo.sn_id }}</view>
					<view class="right p-ab" @click="toUrlbtn('/userPage/user/introduce?type=1&title=' + configJson.entrance_name, false)" v-if="configJson.content">
						<text>{{ configJson.entrance_name }}</text>
						<text class="iconfont icon-xiangyouxiayiye h6 color_FC0"></text>
					</view>
					<view class="up padding10-30 white bold p-ab" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0" @click="toUrlbtn('/pages/Vip/Vip')">
						升级{{ userinfo.nextLevel.vipName }}会员
					</view>
				</view>
				<view class="wh flexac size26" v-else @click="showModal = true">点击登录获取会员权益</view>
			</view>
		</view>

		<!-- 餐饮 -->
		<view class="top_1 p-re" v-if="pageSet.style == 1">
			<view
				class="back auto100 p-ab p-top30"
				:style="{ backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none' }"
				:class="{ pTop: pageSet.immerse, thmeBg: !pageSet.topBgImg }"
			>
				<view class="text-right white p-right24">
					<text class="iconfont icon-qiandao size44" @click="toSign" v-if="pageSet.showSignIn == 1"></text>
					<text
						class="iconfont icon-conversation_icon size44 m-left30"
						:class="{ unread: parseInt(userinfo.unreadMsg) }"
						:data-num="userinfo.unreadMsg"
						@click="toUrlbtn('/userPage/message/messageList')"
						v-if="startUp.service_state == 1 && pageSet.showMessage == 1"
					></text>
				</view>
			</view>
			<view class="card bgwhite zIndex">
				<image
					:src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)"
					mode="aspectFill"
					@click="toUrlbtn('/userPage/user/userinfo')"
					class="bulge bgwhite bor_radius p-ab"
				></image>
				<view class="flexac m-bot24" v-if="userinfo">
					<view class="size32 bold">{{ userinfo.nickName }}</view>
					<view class="bgFC3 bor_radius_10 padding2-14 size22 m-left10 f-shrink-0" v-if="userinfo.vipId">
						{{ userinfo.vipName }}
					</view>
				</view>
				<view class="size32 bold m-bot24 text-center" v-else @click="showModal = true">登录/注册</view>
				<view class="color_66 m-bot24 text-center" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0" @click="toUrlbtn('/pages/Vip/Vip')">
					<text>升级获得{{ userinfo.nextLevel.vipName }}会员权益</text>
					<text class="iconfont icon-xiangyouxiayiye h6 color_66"></text>
				</view>
				<view class="d-flex a-center m-bot24">
					<view class="flex-1 flexac" @click="toUrlbtn('/moneyPage/capital/myMoney')">
						<image :src="imgUrl + 'Uploads/diy/userCenter/balance.png'" mode="widthFix" style="width: 90rpx"></image>
						<view class="m-left20">
							<view class="h7">
								<text class="size42">{{ money }}</text>
								{{ unit }}{{ nameDefinition.balanceUnit || '元' }}
							</view>
							<view class="color_66 m-top4">{{ nameDefinition.balanceTitle || '余额' }}</view>
						</view>
					</view>
					<view class="line bgdd"></view>
					<view class="flex-1 flexac" @click="toUrlbtn('/userPage/user/discount_coupon')">
						<image :src="imgUrl + 'Uploads/diy/userCenter/coupon.png'" mode="widthFix" style="width: 90rpx"></image>
						<view class="m-left20">
							<view class="h7">
								<text class="size42">{{ userinfo.couponCount || 0 }}</text>
								张
							</view>
							<view class="color_66 m-top4">优惠券</view>
						</view>
					</view>
				</view>
				<view class="bgF5 bor_radius_10 d-flex a-center" style="height: 132rpx">
					<view class="w-25 text-center" @click="toUrlbtn('/userPage/sign/integralRecord')">
						<view class="size42">{{ userinfo.sign > 9999 ? '9999+' : userinfo.sign || 0 }}</view>
						<view class="color_66 m-top4">{{ nameDefinition.fenTitle || '积分' }}</view>
					</view>
					<view class="w-25 text-center" @click="toUrlbtn('/userPage/user/CollectList')">
						<view class="size42">{{ userinfo.collectCount || 0 }}</view>
						<view class="color_66 m-top4">收藏</view>
					</view>
					<view class="w-25 text-center" @click="toUrlbtn('/userPage/user/followList')">
						<view class="size42">{{ userinfo.followCount || 0 }}</view>
						<view class="color_66 m-top4">关注</view>
					</view>
					<view class="w-25 text-center" @click="toUrlbtn('/userPage/user/viewed')">
						<view class="size42">{{ footprint }}</view>
						<view class="color_66 m-top4">足迹</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 京东 -->
		<view
			class="top_2 auto100"
			:class="{ pTop: pageSet.immerse }"
			:style="{ backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none' }"
			v-if="pageSet.style == 2"
		>
			<view class="d-flex p-left6 p-right6 m-bot24">
				<image
					:src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)"
					mode="aspectFill"
					@click="toUrlbtn('/userPage/user/userinfo')"
					class="avatar bor_radius m-right20"
				></image>
				<view class="flex-1">
					<view class="d-flex a-center f-wrap m-bot10" v-if="userinfo">
						<view class="size34 bold">{{ userinfo.nickName }}</view>
						<view class="bgFC3 bor_radius_10 padding2-14 size22 m-left10" v-if="userinfo.vipId">
							{{ userinfo.vipName }}
						</view>
					</view>
					<view class="size34 bold m-bot10" v-else @click="showModal = true">登录/注册</view>
					<view class="size28" @click="toUrlbtn('/moneyPage/capital/myMoney')">
						{{ nameDefinition.balanceTitle || '余额' }} ￥{{ money }}
						<text class="h7">{{ unit }}{{ nameDefinition.balanceUnit || '元' }}</text>
					</view>
				</view>
				<text class="iconfont icon-qiandao size44" @click="toSign" v-if="pageSet.showSignIn == 1"></text>
				<text
					class="iconfont icon-a-zu1870 size44 m-left30"
					:class="{ unread: parseInt(userinfo.unreadMsg) }"
					:data-num="userinfo.unreadMsg"
					@click="toUrlbtn('/userPage/message/messageList')"
					v-if="startUp.service_state == 1 && pageSet.showMessage == 1"
				></text>
			</view>
			<view class="p-re m-bot24" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0">
				<image :src="imgUrl + 'Uploads/diy/userCenter/vipImg.png'" mode="widthFix"></image>
				<view class="up d-flex a-center white bold p-ab" @click="toUrlbtn('/pages/Vip/Vip')">
					<text class="m-right10">升级会员</text>
					<text class="iconfont icon-a-RectangleCopy size16"></text>
				</view>
				<view class="next wh d-flex a-center p-ab">
					<view class="size28 m-top20 f-shrink-0">{{ userinfo.nextLevel.vipName }}</view>
					<view class="size26 ellipsis_2">{{ userinfo.nextLevel.vipInfo }}</view>
				</view>
			</view>
			<view class="bgwhite bor_radius_10 d-flex a-center" style="height: 132rpx">
				<view class="w-20 text-center" @click="toUrlbtn('/userPage/sign/integralRecord')">
					<view class="size42">{{ userinfo.sign > 9999 ? '9999+' : userinfo.sign || 0 }}</view>
					<view class="size26 color_66 m-top10">{{ nameDefinition.fenTitle || '积分' }}</view>
				</view>
				<view class="w-20 text-center" @click="toUrl('/userPage/user/discount_coupon')">
					<view class="size42">{{ userinfo.couponCount || 0 }}</view>
					<view class="size26 color_66 m-top10">优惠券</view>
				</view>
				<view class="w-20 text-center" @click="toUrlbtn('/userPage/user/CollectList')">
					<view class="size42">{{ userinfo.collectCount || 0 }}</view>
					<view class="size26 color_66 m-top10">收藏</view>
				</view>
				<view class="w-20 text-center" @click="toUrlbtn('/userPage/user/followList')">
					<view class="size42">{{ userinfo.followCount || 0 }}</view>
					<view class="size26 color_66 m-top10">关注</view>
				</view>
				<view class="w-20 text-center" @click="toUrlbtn('/userPage/user/viewed')">
					<view class="size42">{{ footprint }}</view>
					<view class="size26 color_66 m-top10">足迹</view>
				</view>
			</view>
		</view>

		<!-- 淘宝 -->
		<view
			class="top_3 auto100 p-top40"
			:class="{ pTop: pageSet.immerse, bgwhite: !pageSet.topBgImg }"
			v-if="pageSet.style == 3"
			:style="{ backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none' }"
		>
			<view class="d-flex p-left40 p-right40 m-bot30">
				<image
					:src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)"
					mode="aspectFill"
					@click="toUrlbtn('/userPage/user/userinfo')"
					class="avatar bor_radius m-right20"
				></image>
				<view class="flex-1 a-self-center">
					<view class="d-flex a-center f-wrap m-bot10" v-if="userinfo">
						<view class="size34 bold">{{ userinfo.nickName }}</view>
						<view class="bgFC3 bor_radius_10 padding2-14 size22 m-left10" v-if="userinfo.vipId">
							{{ userinfo.vipName }}
						</view>
					</view>
					<view class="size34 bold m-bot10" v-else @click="showModal = true">登录/注册</view>
					<view class="size28 m-bot10" v-if="Result.userInfo">{{ Result.userInfo.desensitizationPhone }}</view>
					<view class="d-flex a-center">
						<view class="size26" @click="toUrlbtn('/userPage/user/followList')">
							关注
							{{ userinfo.followCount || 0 }}
						</view>
						<view class="line"></view>
						<view class="size26" @click="toUrlbtn('/userPage/user/CollectList')">
							收藏
							{{ userinfo.collectCount || 0 }}
						</view>
						<view class="line"></view>
						<view class="size26" @click="toUrlbtn('/userPage/user/viewed')">足迹 {{ footprint }}</view>
					</view>
				</view>
				<view class="text-center" @click="toSign" v-if="pageSet.showSignIn == 1">
					<text class="iconfont icon-qiandao size40 p-left20 p-right20"></text>
					<view class="m-top4">签到</view>
				</view>
				<view class="text-center" @click="toUrlbtn('/userPage/message/messageList')" v-if="startUp.service_state == 1 && pageSet.showMessage == 1">
					<text class="iconfont icon-conversation_icon size40 p-left20 p-right20" :class="{ unread: parseInt(userinfo.unreadMsg) }" :data-num="userinfo.unreadMsg"></text>
					<view class="m-top4">消息</view>
				</view>
			</view>
			<view class="grade padding20 white">
				<view class="d-flex a-center" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0">
					<view class="size32 bold m-right20">{{ userinfo.nextLevel.vipName }}</view>
					<view class="flex-1 ellipsis m-right20">{{ userinfo.nextLevel.vipInfo }}</view>
					<view class="btn bgwhite bold" @click="toUrlbtn('/pages/Vip/Vip')">升级会员</view>
				</view>
				<view class="d-flex a-center" v-else-if="userinfo.thisLevel">
					<view class="size32 bold m-right20" v-if="userinfo.vipId">{{ userinfo.vipName }}</view>
					<view class="flex-1 ellipsis m-right20">{{ userinfo.thisLevel.vipInfo }}</view>
					<view class="btn bgwhite bold" @click="toUrlbtn('/userPage/user/introduce?type=1&title=' + configJson.entrance_name, false)" v-if="configJson.content">
						{{ configJson.entrance_name }}
					</view>
				</view>
				<view class="size26 text-center" v-else @click="showModal = true">点击登录获取会员权益</view>
			</view>
			<view class="arc bgF5 d-flex a-center zIndex">
				<view class="text-center flex-1" @click="toUrlbtn('/moneyPage/capital/myMoney')">
					<view class="size40 color_33">{{ money }}</view>
					<view class="size26 color_66 m-top10">{{ nameDefinition.balanceTitle || '余额' }}({{ unit }}{{ nameDefinition.balanceUnit || '元' }})</view>
				</view>

				<block v-if="userinfo.v_t_wallet > 0">
					<view class="bgdd"></view>
					<view class="text-center flex-1" @click="toUrlbtn('/userPage/sign/physicalCard')">
						<view class="size40 color_33">{{ userinfo.v_t_wallet }}</view>
						<view class="size26 color_66 m-top10">实体卡额</view>
					</view>
				</block>

				<view class="bgdd"></view>
				<view class="text-center flex-1" @click="toUrlbtn('/userPage/sign/integralRecord')">
					<view class="size40 color_33">{{ userinfo.sign || 0 }}</view>
					<view class="size26 color_66 m-top10">{{ nameDefinition.fenTitle || '积分' }}</view>
				</view>
				<view class="bgdd"></view>
				<view class="text-center flex-1" @click="toUrlbtn('/userPage/user/discount_coupon')">
					<view class="size40 color_33">{{ userinfo.couponCount || 0 }}</view>
					<view class="size26 color_66 m-top10">优惠券</view>
				</view>
			</view>
		</view>

		<!-- 组件 -->
		<view v-if="pageData.length">
			<block v-for="(item, index) in pageData" :key="index">
				<gridCard
					v-if="item.type == 'gridCard'"
					:pageData="item.compCont"
					:orderCount="orderCount"
					:Result="Result"
					:userinfo="userinfo"
					:configJson="configJson"
					@openModal="showModal = true"
					@openDeposit="isDeposit = true"
				></gridCard>
				<Bannel v-if="item.type == 'banner'" :pageData="item.compCont" :isImmerse="1"></Bannel>
				<adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
				<hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
				<divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
			</block>
		</view>

		<!-- 关注公众号 -->
		<image
			:src="imgUrl + '/Uploads/singleSale/singleSaleShopH5/demoTpl/2/static/icon/WeChat.png'"
			mode="widthFix"
			class="follow_btn bor_radius"
			v-if="wxQRCode"
			@click="wxQRCode_switch = true"
		></image>

		<!-- 弹框识别公众号 -->
		<view class="mask flexac f-column" v-if="wxQRCode && wxQRCode_switch">
			<image :show-menu-by-longpress="true" :src="$imgUrls(wxQRCode)" mode="widthFix" class="viewbox5"></image>
			<text class="iconfont icon-guanbi size60" @click="wxQRCode_switch = false"></text>
		</view>

		<Deposit :isDeposit="isDeposit" :userinfo="userinfo" @close="closeDeposit"></Deposit>
		<showModel @cancelFunc="closeModel" goHome="0" v-if="showModal" type="2"></showModel>
		<contact v-if="pageSet.style != undefined"></contact>
		<tabBar :tab="2"></tabBar>
	</view>
</template>

<script>
import contact from '@/components/contact/contact.vue';
import Deposit from '@/components/User/Deposit.vue';
import { mapState } from 'vuex';
import gridCard from '@/components/User/gridCard.vue';
import Bannel from '@/components/home/Bannel.vue';
import adv from '@/components/home/adv.vue';
import hotZone from '@/components/home/hotZone.vue';
import divider from '@/components/home/divider.vue';
export default {
	components: {
		contact,
		Deposit,
		gridCard,
		Bannel,
		adv,
		hotZone,
		divider
	},
	data() {
		return {
			imgUrl: this.imgUrl,
			Result: '',
			userinfo: '', // 用户信息
			configJson: '', // 会员卡信息
			orderCount: '',
			money: 0,
			unit: '',
			wxQRCode: '',
			wxQRCode_switch: false,
			signInState: '0', // 活动开启 1开启 0未开启  未开启则去旧签到功能界面
			footprint: 0, // 足迹
			isDeposit: false, // 退押金
			noPayOrde: {}, // 仓库数量
			toTop: false,
			showModal: false,
			pageSet: {
				// 页面设置
				immerse: true,
				topBgImg: ''
			},
			pageData: '' // diy组件
		};
	},
	onLoad() {
		this.diyget();
	},
	onShow() {
		this.getUserinfo();
		this.getBasicInfo();
	},
	methods: {
		diyget() {
			this.$http
				.get({
					url: '/newdiy/api/v1/diy/getDiyPage',
					data: {
						front: 1,
						type: 5
					}
				})
				.then((res) => {
					if (res.data) {
						if (res.data.pageSet) {
							this.pageSet = res.data.pageSet;
							this.pageData = res.data.front_value || [];
						} else {
							// 新建了但未点保存
							this.initSet();
						}
					} else {
						// 未新建模板
						this.initSet();
					}
				});
		},
		initSet() {
			// 默认配置
			this.pageSet.style = 0;
			this.pageSet.showSignIn = 1;
			this.pageSet.showMessage = 1;
			this.pageData = [
				{
					type: 'gridCard',
					compCont: {
						template: 1,
						title: '订单中心'
					}
				},
				{
					type: 'gridCard',
					compCont: {
						template: 2,
						title: '仓库中心'
					}
				},
				{
					type: 'gridCard',
					compCont: {
						template: 4,
						title: '常用功能'
					}
				}
			];
		},
		closeDeposit() {
			this.isDeposit = false;
			this.getUserinfo();
		},
		getBasicInfo() {
			this.$http
				.post({
					url: '/zzj_singleSaleApi/getMyOrderBasicInfo'
				})
				.then((res) => {
					if (res.errcode != '100') return that.$Toast(res.msg);
					this.noPayOrde = res.data;
				});
		},
		toSign() {
			if (this.signInState == 1) {
				this.toUrl('/userPage/sign2/sign_in');
			} else {
				this.toUrl('/userPage/sign/sign_in');
			}
		},
		closeModel() {
			this.showModal = false;
			this.getUserinfo();
		},
		toUrlbtn(url, flag = true) {
			// flag:是否判断vid
			if (flag && !this.vid) return (this.showModal = true);
			this.toUrl(url);
		},
		getUserinfo() {
			// 获取用户信息
			this.$http
				.post({
					url: '/SRA_userIntegral/myInfo',
					data: {
						VeriCode: this.bid,
						vId: this.vid
					}
				})
				.then((res) => {
					if (res.data) {
						this.Result = res.data;
						this.signInState = res.data.signInState;
						if (res.data.myJson) {
							this.userinfo = res.data.myJson;
							this.orderCount = res.data.myJson.order_count;
							var m = parseFloat(res.data.myJson.money);
							if (m > 9999) {
								this.unit = '万';
								// 保留两位小数、不四舍五入
								// m = (m / 10000).toFixed(2)
								m = Math.floor((m / 10000) * 100) / 100;
							}
							this.money = m;
						}
						if (res.data.configJson) {
							this.configJson = res.data.configJson;
							this.wxQRCode = res.data.configJson.wxQRCode; // 公众号二维码
						}
						this.getHistory();
					} else {
						this.userinfo = '';
						this.orderCount = '';
						this.money = 0;
					}
				});
		},
		getHistory() {
			// 获取足迹
			this.$http
				.post({
					url: '/singleSaleApi/footprint'
				})
				.then((res) => {
					this.footprint = res.count || 0;
				});
		}
	},

	computed: {
		...mapState(['vid', 'bid', 'logo', 'nameDefinition', 'startUp', 'color', 'tabTitle', 'share', 'totalHeight'])
	},

	onPageScroll(e) {
		if (e.scrollTop > 100) {
			this.toTop = true;
		} else {
			this.toTop = false;
		}
	},
	onShareAppMessage() {
		let share = this.share;
		return {
			title: share.title,
			desc: share.desc,
			path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
			imageUrl: `${share.imageUrl}`
		};
	}
};
</script>

<style scoped lang="scss">
.myPage {
	min-height: 100vh;
}

.top_0 {
	padding: 24rpx 24rpx 0 24rpx;

	.avatar {
		width: 100rpx;
		height: 100rpx;
	}

	.collect {
		line-height: 50rpx;
		margin: 0 24rpx;
		background: #666;
	}

	.grade {
		height: 130rpx;

		.right {
			right: 20rpx;
			bottom: 20rpx;
		}

		.up {
			background: #ff6600;
			border-radius: 0 20rpx 0 20rpx;
			right: 0;
			top: 0;
		}
	}
}

.top_1 {
	padding: 340rpx 24rpx 0 24rpx;

	.back {
		width: 100%;
		height: 428rpx;
		top: 0;
		left: 0;
		border-radius: 0 0 50% 50%/5%;
	}

	.card {
		padding: 88rpx 24rpx 24rpx 24rpx;
		border-radius: 10rpx 10rpx 0 0;

		.bulge {
			width: 128rpx;
			height: 128rpx;
			left: 50%;
			top: -74rpx;
			margin-left: -74rpx;
			border: 10rpx solid #fff;
		}

		.line {
			width: 1rpx;
			height: 60rpx;
		}
	}
}

.top_2 {
	padding: 24rpx 24rpx 0 24rpx;

	.avatar {
		width: 90rpx;
		height: 90rpx;
	}

	.up {
		left: 50rpx;
		top: 8rpx;
		z-index: 10;
	}

	.next {
		left: 0;
		top: 0;
		color: #c48a40;

		> view {
			padding: 0 30rpx;

			&:first-child {
				width: 240rpx;
				color: #7f500a;
			}
		}
	}
}

.top_3 {
	.avatar {
		width: 120rpx;
		height: 120rpx;
	}

	.line {
		width: 1rpx;
		height: 20rpx;
		background: #999;
		margin: 0 20rpx;
	}

	.grade {
		background: linear-gradient(45deg, #ffae53, #fd7230);
		border-radius: 40rpx 40rpx 0 0;
		margin: 0 40rpx;
		transform: translateY(2rpx);

		.btn {
			padding: 0 18rpx;
			line-height: 42rpx;
			border-radius: 21rpx;
			color: #ff6600;
		}
	}

	.arc {
		border-radius: 50rpx 50rpx 0 0;
		padding: 40rpx 0 16rpx 0;

		.bgdd {
			width: 1rpx;
			height: 64rpx;
		}
	}
}

.pTop {
	padding-top: var(--total-height);
}

.auto100 {
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.follow_btn {
	width: 80rpx;
	height: auto;
	background: rgba(0, 0, 0, 0.4);
	position: fixed;
	right: 24rpx;
	bottom: calc(150rpx + constant(safe-area-inset-bottom));
	bottom: calc(150rpx + env(safe-area-inset-bottom));
	z-index: 30;
}

.viewbox5 {
	height: auto;
}

.avatar {
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}
</style>
